class Hero {
    constructor() {
        this.x = 100;
        this.y = 400;
        this.direction = "right";
        this.speed = 10;
        this.leftImgs = resObj.heroLeft;
        this.rightImgs = resObj.heroRight;
        this.attackLeftImgs = resObj.attackLeft;
        this.attackRightImgs = resObj.attackRight;
        this.width = this.leftImgs[0].width;
        this.height = this.leftImgs[0].height;
        this.imgIndex = 0;
        this.isAttack = false;
        this.currectImgs = this.rightImgs;
        this.attackImgIndex = 0;
        this.headImg = resObj.heroHead[0];
        this.headWidth = 70;
        this.headHeight = 70;
        this.hp = 100;
        this.totalHp = 100;
        this.mp = 0;
        this.totalMp = 100;
        this.attackAudioList = [];
        for (let i = 0; i < 10; i++) {
            let audio = new Audio();
            audio.src = "./music/attack.wav";
            this.attackAudioList.push(audio);
        }
        this.boomImgs = resObj.boom;
        this.isBoom = false;
        this.boomImgIndex = 0;
        this.boomMusic = document.createElement("audio");
        this.boomMusic.src = "./music/attack3.mp3";
    }
    /**
     * 
     * @param {CanvasRenderingContext2D} ctx 
     */
    draw(ctx) {
        this.move();
        this.darwHead(ctx);
        if (this.isAttack) {
            if (this.direction == "left") {
                this.currectImgs = this.attackLeftImgs;
            }
            else if (this.direction == "right") {
                this.currectImgs = this.attackRightImgs;
            }
            ctx.drawImage(this.currectImgs[this.attackImgIndex], this.x, this.y, this.width, this.height);
            this.attackImgIndex++;
            if (this.attackImgIndex >= this.attackLeftImgs.length) {
                this.isAttack = false;
                this.attackImgIndex = 0;
            }
        }
        else if (this.isBoom) {
            ctx.drawImage(this.boomImgs[this.boomImgIndex], this.x, this.y);
            this.boomImgIndex++;
            if (this.boomImgIndex >= this.boomImgs.length) {
                this.boomImgIndex = 0;
                this.isBoom = false;
            }
        }
        else {
            if (this.direction == "left") {
                this.currectImgs = this.leftImgs;
            }
            else if (this.direction == "right") {
                this.currectImgs = this.rightImgs;
            }
            ctx.drawImage(this.currectImgs[this.imgIndex], this.x, this.y, this.width, this.height);
        }
    }
    move() {
        if (keySet.has(65)) {
            this.direction = "left";
            this.x -= this.speed;
        }
        if (keySet.has(68)) {
            this.direction = "right";
            this.x += this.speed;
        }
        if (keySet.has(87)) {
            this.y -= this.speed;
        }
        if (keySet.has(83)) {
            this.y += this.speed;
        }
        if (keySet.has(65) || keySet.has(68) || keySet.has(87) || keySet.has(83)) {
            this.imgIndex++;
            if (this.imgIndex >= this.leftImgs.length) {
                this.imgIndex = 0;
            }
        }

        //纵向判断
        if (this.y > 720 - this.height) {
            this.y = 720 - this.height;
        }
        else if (this.y < 100) {
            this.y = 100;
        }
        //横向判断
        if (this.x <= 0) {
            this.x = 0;
        }
        else if (this.x > document.documentElement.clientWidth - this.width) {
            this.x = document.documentElement.clientWidth - this.width;
        }
    }
    /**
     * 
     * @param {CanvasRenderingContext2D} ctx 
     */
    darwHead(ctx) {
        ctx.drawImage(this.headImg, 10, 10, this.headWidth, this.headHeight);
        ctx.strokeStyle = "black";
        ctx.strokeRect(this.headWidth + 20, 20, 200, 20);
        let gradientHp = ctx.createLinearGradient(0,0,200,20);
        gradientHp.addColorStop(0.8,"tomato");
        gradientHp.addColorStop(1,"red");
        ctx.fillStyle = gradientHp;
        ctx.fillRect(this.headWidth + 20, 20, this.hp / this.totalHp * 200, 20);

        let gradientMp = ctx.createLinearGradient(0,0,200,20);
        gradientMp.addColorStop(0.4,"lightseagreen");
        gradientMp.addColorStop(1,"blue");
        ctx.fillStyle = gradientMp;
        ctx.strokeRect(this.headWidth + 20, 50, 200, 20);
        ctx.fillRect(this.headWidth + 20, 50, this.mp / this.totalMp * 200, 20)
    }

    //播放攻击的音效
    playAttackMuskc() {
        let audio = this.attackAudioList.pop();
        audio.play();
        this.attackAudioList.unshift(audio);
    }
    playBoomMusic(){
        this.boomMusic.play();
    }
}